<template>
    <div class="bg-img absolute">
        <img
            :src="getImgUrl()"
            alt="weather"
        />
    </div>
</template>

<script lang="ts" setup>
interface props {
    weather: string
}

const { weather } = defineProps<props>()

function getImgUrl() {
    return new URL(`../../static/weatherImgs/${weather}.jpg`, import.meta.url)
        .href
}
</script>

<style lang="scss" scoped>
.bg-img {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
